import React, { useContext, useEffect, useState } from 'react';
import { Form, Input, Button, Grid, Select } from '@arco-design/web-react';
import { GlobalContext } from '@/context';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import { IconRefresh } from '@arco-design/web-react/icon';
import styles from './style/index.module.less';
import cs from 'classnames';
import useIsMountedRef from '@/utils/useIsMountedRef';
import { entityGet } from '@/api/modules/entity';
import debounce from 'lodash/debounce';

const { Row, Col } = Grid;
const Option = Select.Option;
const { useForm } = Form;

function SearchForm(props: {
  formParams: any;
  onSearch: (values: Record<string, unknown>) => void;
}) {
  const { lang, rtl } = useContext(GlobalContext);

  const t = useLocale(locale);
  const [form] = useForm();

  const handleSubmit = () => {
    const values = form.getFieldsValue();
    if (values.q) {
      values.q = values.q.trim();
    }
    console.log(88888);
    props.onSearch(values);
  };

  const handleReset = () => {
    form.resetFields();
    props.onSearch({});
  };

  const colSpan = 12;

  const activeOptions = [
    { value: 1, label: t['searchTable.operation.active'] },
    { value: 0, label: t['searchTable.operation.deactivate'] },
  ];

  const adminOptions = [
    { value: 1, label: t['searchTable.columns.admin.admin'] },
    { value: 0, label: t['searchTable.columns.admin.mormalAccount'] },
  ];

  const [entitys, setEntitys] = useState([]);
  const getEntitys = async () => {
    try {
      const { data } = await entityGet({ active: true });
      if (isMountedRef.current) {
        setEntitys(data);
      }
    } catch (e) {}
  };
  const isMountedRef = useIsMountedRef();
  useEffect(() => {
    getEntitys();
    form.setFieldsValue({
      active: 1,
    });
  }, []);

  return (
    <div className={cs(styles['search-form-wrapper'], rtl ? 'rtl' : '')}>
      <Form
        form={form}
        className={rtl ? styles['search-formrtl'] : styles['search-form']}
        labelAlign="right"
        labelCol={{ span: lang === 'ar-EG' ? 8 : 5 }}
        wrapperCol={{ span: lang === 'ar-EG' ? 16 : 19 }}
        onValuesChange={handleSubmit}
      >
        <Row gutter={24}>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.form.q']} field="q">
              <Input
                autoComplete="off"
                allowClear
                placeholder={t['searchTable.form.q.placeholder']}
              />
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.admin']} field="admin">
              <Select
                allowClear
                placeholder={t['searchTable.select.placeholder']}
              >
                {adminOptions.map((option, index) => (
                  <Option key={index} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.active']} field="active">
              <Select
                allowClear
                placeholder={t['searchTable.select.placeholder']}
              >
                {activeOptions.map((option, index) => (
                  <Option key={index} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={colSpan}>
            <Form.Item label={t['searchTable.columns.name']} field="entityId">
              <Select
                allowClear
                showSearch
                placeholder={t['searchTable.select.placeholder']}
                filterOption={(inputValue, option) => {
                  return (
                    option.props.children
                      .toLowerCase()
                      .indexOf(inputValue.toLowerCase()) >= 0
                  );
                }}
              >
                {entitys.map((option, index) => (
                  <Option key={index} value={option?.id}>
                    {option[lang === 'en-US' ? 'name' : 'nameAr']}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div className={rtl ? styles['right-buttonrtl'] : styles['right-button']}>
        {/* <Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
          {t['searchTable.form.search']}
        </Button> */}
        <Button
          icon={<IconRefresh />}
          onClick={handleReset}
          className={styles['button']}
        >
          {t['searchTable.form.reset']}
        </Button>
      </div>
    </div>
  );
}

export default SearchForm;
